<template>
  <div class="w30 auto pt100">
    <div class="bgf5">
      <div class="f ac ac pt5 pb5 bdbe b">
        <div class="f1 f ac xc">姓名</div>
        <div class="f1 f ac xc">年龄</div>
        <div class="f1 f ac xc">兴趣</div>
      </div>
      <div class="rel ovh" style="height:150px;">
        <div :class="['abs trbl0', curIndex == 0 ? '' : 'trans3']" :style="{transform: `translateY(-${30 * curIndex}px)`}">
          <div v-for="item in showList" :key="item.id" class="f ac xc" style="height:30px;">
            <div class="f1 f ac xc">{{item.name}}</div>
            <div class="f1 f ac xc">{{item.age}}</div>
            <div class="f1 f ac xc">{{item.interst}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src='./index.js'></script>
<style src='./index.css' scoped></style>